<template>
    <div class="relative m-2">
        <div ref="target" :class="active ? 'border-primary' : ''"
            class=" flex rounded-lg justify-between items-center select-none h-10 border-2 p-2 cursor-pointer"
            @click="dropDown">
            <div>

                {{ message }}</div>

            <i v-if="active" class="ri-arrow-drop-down-fill"></i>
            <i v-else class="ri-arrow-drop-left-fill"></i>

        </div>
        <div class=" absolute w-24 bg-white truncate rounded-lg my-1 border-white shadow-lg" :class="active ? 'block' : 'hidden'">
            <div v-for="item in list" class="  hover:bg-primary p-2 hover:text-white">{{ item }}</div>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
export default defineComponent({
    props: ['list', 'message'],
    setup() {
        const target = ref(null)
        const active = ref(false)
        const dropDown = () => {
            active.value = true
        }
        onClickOutside(target, (event) => {
            active.value = false
        })
        return { target, active, dropDown }
    }
})

</script>